<h2 class="pb-1">Active Matches</h2>
<h6 class="pb-4">{{matches.length}} running matches found.</h6>

<ngb-alert [dismissible]="false" type="danger" class="mb-3" *ngIf="error">
  <img src="/assets/svg/red-triangle.svg" alt="" width="16" height="" class="mr-2">
  <h6 class="mr-2 d-inline font-weight-bold">An error occurred: {{error}}</h6>
</ngb-alert>

<div class="row no-gutters">
  <table class="table table-sm table-bordered">
    <thead class="thead-light">
      <tr>
        <th><span [class.pl-3]="matches.length > 0">Match ID</span></th>
        <th style="width: 130px">Presence Count</th>
        <th style="width: 100px">Authoritative</th>
        <th style="width: 130px">Handler Name</th>
        <th style="width: 90px">Tick Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngIf="matches.length === 0">
        <td colSpan="7" class="text-muted">No realtime matches were found.</td>
      </tr>

      <ng-template ngFor let-i="index" let-m [ngForOf]="matches">
        <tr>
          <td>
            <div class="arrow" *ngIf="m.authoritative" (click)="getMatchState(i, m); matchStatesOpen[i]=!matchStatesOpen[i];">
              <div class="arrow-right" *ngIf="!matchStatesOpen[i]"></div>
              <div class="arrow-down" *ngIf="matchStatesOpen[i]"></div>
            </div>

            <div *ngIf="!m.authoritative" class="d-inline-block mr-3"></div>
            {{m.match_id}}
          </td>
          <td>{{m.size}}</td>
          <td class="text-center">
            <span *ngIf="m.authoritative">Yes</span>
            <span *ngIf="!m.authoritative">No</span>
          </td>
          <td>{{m.handler_name}}</td>
          <td>{{m.authoritative ? m.tick_rate : '-'}}</td>
        </tr>
        <tr *ngIf="matchStatesOpen[i]" class="open-row">
          <td colspan="5" class="align-middle">

            <div class="d-flex p-0">
              <div class="p-3 w-33 border">
                <small><b>Match Label</b></small>

                <pre class="pre-wrap m-0 p-0"><small>{{m.label}}</small></pre>
              </div>

              <div class="p-3 w-33 border border-left-0">
                <img *ngIf="!matchStates[i] || matchStates[i] === null" src="/assets/spinner.svg" class="d-block" width="16">
                <div *ngIf="matchStates[i] !== null">
                  <small><b>Current Tick</b></small>
                  <pre class="pre-wrap m-0 p-0"><small>{{matchStates[i].tick}}</small></pre>
                  <small><b>Match State</b></small>
                  <pre class="pre-wrap m-0 p-0"><small>{{matchStates[i].state}}</small></pre>
                </div>
              </div>

              <div class="p-3 w-33 border border-left-0">
                <small><b>Match Presences</b></small>
                <img *ngIf="!matchStates[i] || matchStates[i] === null" src="/assets/spinner.svg" class="d-block" width="16">
                <pre *ngIf="matchStates[i] !== null" class="pre-wrap m-0 p-0"><small>{{getMatchPresencesString(matchStates[i].presences)}}</small></pre>
              </div>
            </div>

          </td>
        </tr>
      </ng-template>


    </tbody>
  </table>
</div>
